<template>
  <div v-if="islogin">
    <div :style="{'background-image': `url(${user.beiimg})`}">
      <van-row>
        <van-col span="8">

          <van-icon name="wap-nav" size="30px" @click="totan"/>

          <van-popup
              v-model:show="showLeft"
              position="left"
              :style="{ width: '30%', height: '100%' }"
          >
            aaaaaaaaa
          </van-popup>

        </van-col>

        <van-col span="8"></van-col>
        <van-col span="8"></van-col>
      </van-row>
      <br><br>
      <van-row>
        <van-col span="1"></van-col>
        <van-col span="8">
          <van-image
              round
              width="7rem"
              height="7rem"
              :src="user.headimg"
          />
        </van-col>
        <van-col span="15">
          <p style="color: aliceblue">{{ user.username }}</p>
          <p style="color: aliceblue">ID:{{ user.userid }}</p>
          <p style="color: aliceblue">IP属地:{{ user.address }}</p>
        </van-col>
      </van-row>
      <br>
      <van-row>
        <van-col span="1"></van-col>
        <van-col span="23">
          <p style="color: aliceblue">{{ user.individual }}</p>

        </van-col>
      </van-row>

      <van-row>
        <van-col span="1"></van-col>
        <van-col span="3">
          <center>
            <p style="color: aliceblue">
              8.8万 <br>
              被赞
            </p></center>

        </van-col>
        <van-col span="3">
          <center>
            <p style="color: aliceblue">
              2.1万 <br>
              粉丝
            </p></center>
        </van-col>
        <van-col span="3">
          <center>
            <p style="color: aliceblue">
              4600 <br>
              关注
            </p></center>
        </van-col>
        <van-col span="2">
        </van-col>
        <van-col span="4">
          <br>
          <van-button round type="default" style="color:aliceblue; width: 100px; background-color: transparent;"
                      @click="touserdata">编辑资料
          </van-button>
        </van-col>
        <van-col span="3">
        </van-col>

        <van-col span="4">
          <br>
          <van-icon name="setting-o" size="50px" @click="toshezhi"/>
        </van-col>
      </van-row>
    </div>
    <br><br>
    <br><br>
    <van-tabs v-model:active="activ" style="bottom: 60px">
      <van-tab title="最近">
        <div v-for="(item, index) in zuijin" :key="index">
          <van-row style="background-color: #f7f7f7">
            <br>
            <van-col span="1" style="background-color: #f7f7f7">&nbsp;<br><br> &nbsp;</van-col>
            <van-col span="22">
              <div v-if="item.kind==0" style="background-color: #ffffff;border-radius: 30px;">
                <van-row>
                  <van-col span="4">
                    <van-image
                        round
                        width="5rem"
                        height="5rem"
                        :src="item.user.headimg"
                    />
                  </van-col>
                  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                  <van-col span="16">
                    <br>
                    {{ item.user.username }}
                    <br>
                    {{ dateFormat(item.addtime) }}
                  </van-col>
                </van-row>
                <br>
                <van-row @click="toessay(item.id)">
                  <van-col span="1"></van-col>
                  <van-col span="13">
                    <van-text-ellipsis
                        rows="2"
                        :content="item.content"
                        expand-text="展开"
                        collapse-text="收起"
                    />
                  </van-col>
                  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                  <van-col span="5">
                    <van-image
                        width="100"
                        height="100"
                        :src="item.imglist"
                    />
                  </van-col>
                  <van-col span="1"></van-col>
                </van-row>

                <van-row>
                  <van-col span="8">
                    &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                    分享
                  </van-col>
                  <van-col span="8">
                    <van-icon name="chat-o" size="20px"/>
                    665
                  </van-col>
                  <van-col span="8">
                    <van-icon name="thumb-circle-o" size="20px"/>
                    318
                  </van-col>
                </van-row>
                <br>

              </div>
              <!--                展示视频-->
              <div v-if="item.kind==1">
                <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
                <div class="video-item" style="background-color: #ffffff">
                  <van-row>
                    <van-col span="1"></van-col>
                    <van-col span="11">

                      <div class="video-info">
                        <span>{{ item.title }}</span>
                        <br>
                      </div>
                    </van-col>
                    <van-col span="10">
                      <div class="video-thumbnail" @click="goToVideoDetail(item)">
                        <br>
                        <video controls width="150" height="90" ref="videoRef" style="right: 50px">
                          <source src="http://localhost:8000/upload/video/kunkun.mp4" type="video/mp4">
                          您的浏览器不支持 HTML5 video 标签。
                        </video>
                        <!--              <span class="video-duration">{{ video.duration }}</span>-->
                      </div>
                    </van-col>
                    <br>
                    <van-col span="22">

                      <span>&nbsp;&nbsp;&nbsp;&nbsp; {{
                          item.num
                        }}播放量 &nbsp;&nbsp;&nbsp;&nbsp; {{ dateFormat(item.addtime) }}</span>
                    </van-col>

                  </van-row>
                </div>

                <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
              </div>

              <!--展示动态-->
              <div v-if="item.kind==2">
                <div style="background-color: #ffffff;border-radius: 30px;">
                  <van-row>
                    <van-col span="4">
                      <van-image
                          round
                          width="5rem"
                          height="5rem"
                          :src="item.user.headimg"
                      />
                    </van-col>
                    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                    <van-col span="16">
                      <br>
                      {{ item.user.username }}
                      <br>
                      {{ dateFormat(item.addtime) }}
                    </van-col>
                  </van-row>
                  <br>
                  <van-row>
                    <van-col span="1"></van-col>
                    <van-col span="22">
                      <a style="color:#0066cc;">{{ item.topic.title }}</a>{{ item.content }}
                    </van-col>
                    <van-col span="1"></van-col>
                  </van-row>
                  <van-row>
                    <van-col span="8" v-for="(itmeimg,key) in item.imglist" :key="key">
                      <van-image
                          width="100"
                          height="100"
                          :src="itmeimg"
                      />
                    </van-col>
                  </van-row>

                  <van-row>
                    <van-col span="8">
                      &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                      分享
                    </van-col>
                    <van-col span="8">
                      <van-icon name="chat-o" size="20px"/>
                      665
                    </van-col>
                    <van-col span="8">
                      <van-icon name="thumb-circle-o" size="20px"/>
                      318
                    </van-col>
                  </van-row>
                  <br>
                </div>
              </div>
              <br>

            </van-col>
            <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
          </van-row>
        </div>
      </van-tab>

      <van-tab title="文章">
        <div v-for="(item, index) in wenzhang" :key="index">
          <van-row style="background-color: #f7f7f7">
            <van-col span="1" style="background-color: #f7f7f7"><br></van-col>
          </van-row>
          <van-row style="background-color: #f7f7f7">
            <van-col span="1" style="background-color: #f7f7f7"><br></van-col>

            <van-col span="22">
              <div style="background-color: #ffffff;border-radius: 30px;">
                <van-row>
                  <van-col span="4">
                    <van-image
                        round
                        width="5rem"
                        height="5rem"
                        :src="item.user.headimg"
                    />
                  </van-col>
                  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                  <van-col span="16">
                    <br>
                    {{ item.user.username }}
                    <br>
                    {{ dateFormat(item.addtime) }}
                  </van-col>
                </van-row>
                <br>
                <van-row @click="toessay(item.id)">
                  <van-col span="1"></van-col>
                  <van-col span="13">
                    <van-text-ellipsis
                        rows="2"
                        :content="item.content"
                        expand-text="展开"
                        collapse-text="收起"
                    />
                  </van-col>
                  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                  <van-col span="5">
                    <van-image
                        width="100"
                        height="100"
                        :src="item.imglist"
                    />
                  </van-col>
                  <van-col span="1"></van-col>
                </van-row>

                <van-row>
                  <van-col span="8">
                    &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                    分享
                  </van-col>
                  <van-col span="8">
                    <van-icon name="chat-o" size="20px"/>
                    665
                  </van-col>
                  <van-col span="8">
                    <van-icon name="thumb-circle-o" size="20px"/>
                    318
                  </van-col>
                </van-row>
                <br>
              </div>
              <br>
            </van-col>
            <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="视频" style="background-color: #f7f7f7">
        <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
        <div class="video-item" style="background-color: #ffffff"  v-for="(item, index) in videoList" :key="index">
          <van-row>
            <van-col span="1"></van-col>
            <van-col span="11">

              <div class="video-info" @click="tovideo(item.id)">
                <span>{{ item.title }}</span>
                <br>
              </div>
            </van-col>
            <van-col span="10">
              <div class="video-thumbnail" @click="goToVideoDetail(item.id)">
                <br>
                <video controls width="150" height="90" ref="videoRef" style="right: 50px">
                  <source src="http://localhost:8000/upload/video/kunkun.mp4" type="video/mp4">
                  您的浏览器不支持 HTML5 video 标签。
                </video>
                <!--              <span class="video-duration">{{ video.duration }}</span>-->
              </div>
            </van-col>
            <br>
            <van-col span="22">

                      <span>&nbsp;&nbsp;&nbsp;&nbsp; {{
                          item.num
                        }}播放量 &nbsp;&nbsp;&nbsp;&nbsp; {{ dateFormat(item.addtime) }}</span>
            </van-col>

          </van-row>
        </div>

        <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>


      </van-tab>
      <van-tab title="动态">
        <div v-for="(item,key) in dynamicList" :key="key">
          <van-row style="background-color: #f7f7f7">
            <van-col span="1" style="background-color: #f7f7f7"><br></van-col>
          </van-row>
          <van-row style="background-color: #f7f7f7">
            <van-col span="1" style="background-color: #f7f7f7"><br></van-col>

            <van-col span="22">

              <div style="background-color: #ffffff;border-radius: 30px;">
                <van-row>
                  <van-col span="4">
                    <van-image
                        round
                        width="5rem"
                        height="5rem"
                        :src="item.user.headimg"
                    />
                  </van-col>
                  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                  <van-col span="16">
                    <br>
                    {{ item.user.username }}
                    <br>
                    {{ dateFormat(item.addtime) }}
                  </van-col>
                </van-row>
                <br>
                <van-row>
                  <van-col span="1"></van-col>
                  <van-col span="22">
                    <a style="color:#0066cc;">{{ item.topic.title }}</a>{{ item.content }}
                  </van-col>
                  <van-col span="1"></van-col>
                </van-row>
                <van-row>
                  <van-col span="8" v-for="(items,key) in item.imglist" :key="key">
                    <van-image
                        width="100"
                        height="100"
                        :src="items"
                    />
                  </van-col>
                </van-row>

                <van-row>
                  <van-col span="8">
                    &nbsp;&nbsp; &nbsp;&nbsp;<van-icon name="share-o" size="20px"/>
                    分享
                  </van-col>
                  <van-col span="8">
                    <van-icon name="chat-o" size="20px"/>
                    665
                  </van-col>
                  <van-col span="8">
                    <van-icon name="thumb-circle-o" size="20px"/>
                    318
                  </van-col>
                </van-row>
                <br>
              </div>
              <br>
            </van-col>
            <van-col span="1" style="background-color: #f7f7f7">&nbsp;</van-col>
          </van-row>
        </div>

      </van-tab>
    </van-tabs>


  </div>
  <div v-if="!islogin">
    <div class="login-container">
      <van-button type="danger" class="login-button" @click="tologin()">登录</van-button>
      <div class="login-description">
        登录后同步收藏、评论、关注
      </div>
    </div>
    <div>
      <br>
      <center>
        最近&nbsp;&nbsp;&nbsp;&nbsp; 文章&nbsp;&nbsp;&nbsp;&nbsp; 视频&nbsp;&nbsp;&nbsp;&nbsp; 动态
      </center>

      <img src="https://cdn7.axureshop.com/demo2024/1966126/images/%E6%88%91%E7%9A%84_/u827.png"
           style="height: 200px;width: 100%">
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import {useRoute} from "vue-router";
import http from "@/http";
import {onMounted, ref} from "vue";
import router from "@/router";

const showLeft = ref(false);
const islogin = ref(false)
const user = ref({}) //用户信息
const videoList = ref([])
const dynamicList = ref([])
const activ = ref(0)
const zuijin = ref([])
const wenzhang = ref([])


const tologin = () => {
  router.push('/login')
}
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}


const toessay = (id) => {
  router.push(`essaydetail?id=${id}`)
}

const touserdata = () => {
  router.push('/userdata')
}
const toshezhi = () => {
  router.push('/shezhi')
}

const totan = () => {
  showLeft.value = true
}

const goToVideoDetail = (id) => {
  // 这里可以实现跳转到视频详情页面的逻辑
  router.push('videodetails/?id='+id)
};

const find = () => {
  let id = localStorage.getItem('userid')
  http.get('user/finduserrecent?userid=' + id).then(res => {
    zuijin.value = res.data.data

  })
}
// 所有文章接口
const findwenzhang = () => {
  let id = localStorage.getItem('userid')
  http.get('user/findAllessay?userid=' + id).then(res => {
    wenzhang.value = res.data.data

  })
}

const finduserAllvideo = () => {
  axios.get(`http://localhost:8000/user/findAllvideo/?userid=${user.value.id}`).then(res => {
    videoList.value = res.data.data
  })
}

// const goToVideoDetail = (video) => {
//   // 这里可以实现跳转到视频详情页面的逻辑
//   console.log('跳转到视频详情页面，视频信息：', video);
// };
// 查询所有动态
const finduserAlldynamic = () => {
  axios.get(`http://localhost:8000/user/findAlldynamic/?userid=${user.value.id}`).then(res => {
    dynamicList.value = res.data.data
  })
}


const finduser = (id) => {
  axios.get(`user/userID/?userid=${id}`).then(res => {
    user.value = res.data.data
    find()
    finduserAllvideo()
    finduserAlldynamic()
    findwenzhang()
  })
}

const route = useRoute();
const token = ref('');
const ID = ref('')
const retoken = ref('')
onMounted(() => {

  const tokenFromURL = route.query.token
  const IDFromuRl = route.query.userid
  const retokenFromURL = route.query.reToken

  if (tokenFromURL) {
    ID.value = IDFromuRl
    token.value = tokenFromURL;
    retoken.value = retokenFromURL
    localStorage.setItem('token', token.value);
    localStorage.setItem('userid', ID.value);
    localStorage.setItem('retoken', retoken.value);
  }
  if (localStorage.getItem("token") != null) {
    islogin.value = true
    finduser(localStorage.getItem("userid"))
  } else {
    islogin.value = false
  }
})

// 跳转视频详情页 id 视频id
const tovideo=(id)=>{
  router.push('videodetails/?id='+id)
}

</script>

<style scoped>
.video-item {
  display: flex;
  border-radius: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.video-info {
  flex: 1;
}

.video-thumbnail {
  position: relative;
  margin-left: 10px;
}

.video-duration {
  position: absolute;
  bottom: 0;
  right: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 5px;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 380px;
  background-color: #f8f8f8;
}

.login-button {
  width: 80px;
  height: 80px;
  font-size: 20px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.login-description {
  margin-bottom: 40px;
  font-size: 14px;
  color: #666;
}
</style>